<template>
  <div :class="$style['job']" style="width: 100%;height: 200px">
    <p>【金山文档】 在线文档demo</p>
    <p>{{ url }}</p>
    <a-button type="primary" @click="showModal">预览</a-button>
    <a-button type="primary" @click="showModal1">预览1</a-button>
    <a-button type="primary" @click="changeTheme">切换主题色1</a-button>
    <a-button type="primary" @click="setTheme">切换主题色2</a-button>
    <a-modal
      v-model:visible="visible1"
      title="【金山文档】 在线文档demo"
      style="width: 200px"
      @ok="handleOk"
    >
      123123
      <!--      <Weboffice />-->
    </a-modal>
    <!--    <a-table :data-source="dataSource" :columns="columns" />-->

    <!--    <A />-->
    <!--    JOB: <B msg="123" />-->

    <!--    <MyDialog v-model:visible="visible" />-->
    <div>
      <a-carousel dot-position="bottom" :autoplay="true" style="width: 500px;">
        <div>
          <div style="height: 200px">
            第一张
          </div>
        </div>
        <div>
          <div style="height: 200px">
            第二张
          </div>
        </div>
        <div>
          <div style="height: 200px">
            第三张
          </div>
        </div>
      </a-carousel>
    </div>
  </div>
</template>

<script setup lang="tsx">
// import Weboffice from '@/components/weboffice/index.vue';
import { ref, getCurrentInstance } from 'vue';
import { ConfigProvider } from 'ant-design-vue';
import A from './tsx-test/a.vue';
import B from './tsx-test/b.tsx';
import useCommandComponent from '@/untils';
import MyDialog from '@/components/myDialog.vue';

const url = 'https://kdocs.cn/l/cuds4mhK8kOF';

const visible1 = ref(false);
const visible = ref(false);
const instance = getCurrentInstance();
const showModal = () => {
  // visible.value = true;
  const myDialog = useCommandComponent(
    <MyDialog msg="box" onClose={(e: string) => console.log(e)} />,
    instance,
  );
  myDialog({
    title: 'test111111111',
    okText: 'ok123',
    // footer: null,
    onCancel: () => {
      getList();
    },
    // onOk: () => {
    //   console.log('submit');
    // },
  });
};
const getList = () => {
  console.log('getList');
};
const showModal1 = () => {
  visible1.value = true;
};
const handleOk = () => {
  visible.value = false;
};

const changeTheme = () => {
  ConfigProvider.config({
    theme: {
      primaryColor: '#9743fe',
    },
  });
};
const setTheme = () => {
  const theme = {
    theme: 'purple',
    mode: 'tint',
  };
  const element: HTMLElement = document.documentElement;
  element.className.split(' ').forEach(className => {
    if (/^(dark|tint|triascloud-theme-.*?)$/.test(className)) {
      element.classList.remove(className);
    }
  });
  element.classList.add(`triascloud-theme-${theme.theme}`);
  element.classList.add(theme.mode);
};
const dataSource = [
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
  },
];
const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  },
];
</script>

<style lang="less" module>
.job {
  :global {
    .ant-table-thead > tr > th {
      color: var(--font);
      font-weight: 500;
      text-align: left;
      background: var(--ant-primary-1);
      transition: background 0.3s ease;
    }
    .ant-carousel .slick-slide {
      background-color: #00c361;
    }
  }
}
</style>
